<template>
<div class="bg">
  <div class="center">
<div class="carousel">    
  <!-- -----------走马灯 轮播图----- -->
  <el-carousel :interval="3000" type="card" height="300px" width="100%" >
    <el-carousel-item v-for="(item,index) in carouselPic" :key="index" width="100%">
      <img :src="item.picUrl" alt="" srcset="">
      <h3 class="medium">{{ item.name }}</h3>
    </el-carousel-item>
  </el-carousel>   
<!-- -----------走马灯 轮播图-----end -->
<!-- --------------div1 推荐节目 节目排行-------start-------- -->
<div class="box">
      <div class="box1">
        <div class="left">
          <boxtop></boxtop>
          <div class="tuijian">
            <ul>    
              <li v-for="item in radioToplist" 
              :key="item.program.commentThreadId"> 
              <img :src="item.program.coverUrl" alt=""> 
              <div>  <a href="#">
                <span>{{item.program.description}}</span>
                </a>
               <a href="#">
                 <em>{{item.program.dj.nickname}}</em>   
                 </a>
              </div> 
             
               <!-- <div class="buttonright"> -->
                <a href="#" class="buttonright">
              <button>{{item.program.radio.category}}</button>
            </a>
              <!-- </div> -->
              </li>
              
            </ul>
          </div>
          
        </div>
        <div class="right">
          <boxtop></boxtop>
          <div class="paihang">
            <houerPaihang></houerPaihang>
          </div>
        </div>
    
    </div>
</div>

<!-- --------------div1 推荐节目 节目排行-------end-------- -->

</div>
  </div>
</div>
</template>

<script>
import axios from 'axios';
import  boxtop from "./boxtop";
import  houerPaihang from "./houerPaihang"
export default {
  components:{
      boxtop,houerPaihang
    },   
    name:"MyRadio",
  data() {
    return {
      // property: 'value',
      carouselPic:[],
      radioToplist:[],
    };
  },
  methods: {
    getvideo() {
      var that=this;
      axios.get("http://localhost:3000/dj/recommend")
      .then(function(res){
        that.carouselPic=res.data.djRadios;
        // console.log("tttttttttttttttttttttttt");
        // console.log(that.carouselPic);
      },function(erro){
        console.log(erro);
      });
      // ---------------------电台推荐初始化------------------
      axios.get("http://localhost:3000/dj/program/toplist?limit=10")
      .then(function(res){
        // console.log("tttttttttttttttttttttttt");  //[0].program.description
        // console.log(res.data.toplist);
        that.radioToplist=res.data.toplist;
      },function(erro){
        console.log(erro);
      });

    },
  },
  mounted:function(){
   this.getvideo();
    
     }
}
</script>

<style scoped>
.bg{
  background-color: rgb(218, 218, 218);
}
a:hover{
  text-decoration: underline black;
  color: black;
}
 .center{
   width:1100px;
   /* height: 900px; */
   margin: auto;
   background-color:white;
 }
 /* ------------走马灯 轮播图------------ */
 .carousel{
  width:1100px;
 }
 .el-carousel__item img{
   width: 100%;
   height: 100%;
 }
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  /* -- --------------div1 推荐节目 节目排行-------start-------- --> */
.box{
  width:1100px;
  padding-left: 50px;
   padding-right: 50px;
}
.box .box1 .left{
  float:left;
  width:470px;
height: 650px;
  /* background-color: #d3dce6; */
}
.box .box1 .right{
  float:left;
   width:470px;
   height: 650px;
  /* background-color: #d3dce6; */
  margin-left: 50px;
}
 .tuijian{
   width: 100%;
   height: 600px;
   border: 1px solid #d3dce6;
   border-top:2px solid rgb(194, 12, 12);
 }
 .paihang{
   width: 100%;
   height: 600px;
   border: 1px solid #d3dce6;
   border-top:2px solid rgb(194, 12, 12);
 }
 .tuijian ul{
   width: 100%;

 }
 .tuijian ul li{
   height: 60px;
  
 }
 
 .tuijian ul li:nth-child(even){ 
   background-color: rgb(247, 247, 247);
   }
     .tuijian ul li img{
     width: 40px;
     height: 40px;
      vertical-align: text;
      margin-left: 23px;
      margin-top: 10px;
      
   }
   .tuijian ul li div{
     width: 280px;
     display: inline-block;
     height: 40px;
     margin-left: 15px;
     margin-top: 10px;
     /* vertical-align: middle; */
   }
   .tuijian ul li div a span{
      display: block;
     width: 280px;
     height: 21px;
    overflow: hidden;
    white-space: nowrap;
     text-overflow:ellipsis;
     color: rgb(51, 51, 51);
   }
   .tuijian ul li div  a:hover span{
color: black;
   }
   .tuijian ul li div a em{
     font-style:normal;
     color:rgb(153, 153, 153);
     font-size: 14px;
   }
 
   
     .buttonright{
      display:inline-block;
      width: 90px;
     height: 40px;
     margin-left:10px;
     line-height: 60px;
     position:relative;
     top: -14px;
     
    }
     .buttonright button{
      width: 90px;
     height: 40px;


    }
</style>

